<!DOCTYPE html>
<html>
<head>
    <title>Spring-Mass System</title>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // Parameters based on the image proportions
        const floorY = 250;
        const wallX = 120;
        const posA = 300;
        const posO = 500;
        const posB = 700;
        const ballRadius = 50;

        // 1. Draw Surface (Floor)
        const startLineX = wallX - 20;
        const endLineX = posB + 80;
        ctx.beginPath();
        ctx.moveTo(startLineX, floorY);
        ctx.lineTo(endLineX, floorY);
        ctx.stroke();

        // Hatch marks for the floor
        ctx.lineWidth = 1;
        for (let x = startLineX + 10; x < endLineX; x += 25) {
            ctx.beginPath();
            ctx.moveTo(x, floorY);
            ctx.lineTo(x - 15, floorY + 15);
            ctx.stroke();
        }

        // 2. Draw Wall
        ctx.lineWidth = 2;
        ctx.beginPath();
        const wallTopY = floorY - 140;
        ctx.moveTo(wallX, floorY);
        ctx.lineTo(wallX, wallTopY);
        ctx.stroke();
        
        // Hatch marks for the wall
        ctx.lineWidth = 1;
        for (let y = floorY - 10; y > wallTopY; y -= 25) {
            ctx.beginPath();
            ctx.moveTo(wallX, y);
            ctx.lineTo(wallX - 15, y - 15);
            ctx.stroke();
        }

        // 3. Draw Spring
        ctx.lineWidth = 1.5;
        const springStartX = wallX;
        const ballCenterX = posA;
        const ballCenterY = floorY - ballRadius;
        const springEndX = ballCenterX - ballRadius;
        const springY = ballCenterY;

        const numCoils = 9;
        const totalSpringWidth = springEndX - springStartX;
        const coilStep = totalSpringWidth / numCoils;
        const coilRadiusX = 10; // Semi-minor axis of ellipse (for thickness)
        const coilRadiusY = 30; // Semi-major axis of ellipse (for height)

        for (let i = 0; i < numCoils; i++) {
            ctx.beginPath();
            let centerX = springStartX + coilStep * i + coilStep / 2;
            // Draw an ellipse for each coil to replicate the drawing style
            ctx.ellipse(centerX, springY, coilRadiusX, coilRadiusY, Math.PI / 2, 0, 2 * Math.PI);
            ctx.stroke();
        }

        // 4. Draw Ball
        const gradient = ctx.createRadialGradient(
            ballCenterX - ballRadius * 0.3, ballCenterY - ballRadius * 0.3, ballRadius * 0.1, // Inner circle (light source)
            ballCenterX, ballCenterY, ballRadius  // Outer circle (edge of the ball)
        );
        gradient.addColorStop(0, 'white');
        gradient.addColorStop(0.8, '#CCCCCC');
        gradient.addColorStop(1, '#888888');

        ctx.beginPath();
        ctx.arc(ballCenterX, ballCenterY, ballRadius, 0, 2 * Math.PI);
        ctx.fillStyle = gradient;
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        // 5. Draw Points on the line
        const pointRadius = 5;
        ctx.fillStyle = 'black';

        ctx.beginPath();
        ctx.arc(posA, floorY, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(posO, floorY, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(posB, floorY, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 6. Draw Labels
        ctx.fillStyle = 'black';
        ctx.font = 'italic 35px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';

        ctx.fillText('A', posA, floorY + 15);
        ctx.fillText('O', posO, floorY + 15);
        ctx.fillText('B', posB, floorY + 15);

    </script>
</body>
</html>